<script type="text/javascript">
    $(function() {
        $("#tabs").tabs();

        var $materials_1 = $('#materials_vegt');
        var $materials_2 = $('#materials_meat');
        var $spices =$('#spices');
       // let the gallery items be draggable
        $('li',$materials_1).draggable({
                cancel: 'a.ui-icon',// clicking an icon won't initiate dragging
                revert: 'invalid', // when not dropped, the item will revert back to its initial position
                containment: $('#demo-frame').length ? '#demo-frame' : 'document', // stick to demo-frame if present
                helper: 'clone',
                opacity: 0.8,
                cursorAt: { cursor: 'move', top: 48, left: 48 }
        });

        $('li',$materials_2).draggable({
                cancel: 'a.ui-icon',// clicking an icon won't initiate dragging
                revert: 'invalid', // when not dropped, the item will revert back to its initial position
                containment: $('#demo-frame').length ? '#demo-frame' : 'document', // stick to demo-frame if present
                helper: 'clone',
                opacity: 0.8,
                cursorAt: { cursor: 'move', top: 48, left: 48 }
        });


        $('li',$spices).draggable({
                cancel: 'a.ui-icon',// clicking an icon won't initiate dragging
                revert: 'invalid', // when not dropped, the item will revert back to its initial position
                containment: $('#demo-frame').length ? '#demo-frame' : 'document', // stick to demo-frame if present
                helper: 'clone',
                opacity: 0.8,
                cursorAt: { cursor: 'move', top: 48, left: 48 }
        });



        $("#food_dropper").droppable({
            accept: '#materials_vegt > li',
	    activeClass: 'ui-state-highlight',
            hoverClass: 'ui-state-active',
            drop: function(event, ui) {
                $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
                $(this).append(ui.draggable);
            }
        });


        $materials_1.droppable({
            accept: '#food_dropper > li',
	    activeClass: 'ui-state-highlight',
            hoverClass: 'ui-state-active',
            drop: function(event, ui) {
                $(this).append(ui.draggable);
            }
        });



        $("#dialog_buy").dialog({
            autoOpen: false, 
            bgiframe: true,
            height: 300,
            modal: true,
            buttons: {
                '确定': function() {
                    $(this).dialog('close');
                },
                '取消': function() {
                    $(this).dialog('close');
                }
            }
        });
    });

    function show_dialog() {
        $("#dialog_buy").dialog('open');
    }



</script>




<div id="main" class="two_col_wrap">

  <div id="left">

    <p style="color: green"><%= flash[:notice] %></p>
    <div id="tabs">
      <ul>
        <li><a href="#tabs-1">蔬菜</a></li>
        <li><a href="#tabs-2">肉类</a></li>
        <li><a href="#tabs-3">调味料</a></li>
      </ul>
      <div id="tabs-1" style="filter: Alpha(Opacity=50)">
        <p>这里显示各种蔬菜</p>
        <ul id="materials_vegt" class="dl_list">
          <li onClick="return show_dialog();">
            <div class="div_materials"><img src="/images/vegetables/1.gif"/></div>
          </li>
          <li>
            <div class="div_materials"><img src="/images/vegetables/2.gif"/></div>
          </li>
          <li>
            <div class="div_materials"><img src="/images/vegetables/3.gif"/></div>
          </li>
          <li>
            <div class="div_materials"><img src="/images/vegetables/4.gif"/></div>
          </li>
          <li>
            <div class="div_materials"><img src="/images/vegetables/5.gif"/></div>
          </li>
          <li>
            <div class="div_materials"><img src="/images/vegetables/6.gif"/></div>
          </li>
          <li>
            <div class="div_materials"><img src="/images/vegetables/7.gif"/></div>
          </li>
        </ul>
      </div>
      <div id="tabs-2">
        <p>这里显示肉类</p>
        <ul id="materials_meat" class="dl_list">
          <li><div class="div_materials"><img src="/images/meat/1.gif"/></div></li>
          <li><div class="div_materials"><img src="/images/meat/2.gif"/></div></li>
          <li><div class="div_materials"><img src="/images/meat/3.gif"/></div></li>
          <li><div class="div_materials"><img src="/images/meat/4.gif"/></div></li>
          <li><div class="div_materials"><img src="/images/meat/5.gif"/></div></li>

        </ul>
      </div>
      <div id="tabs-3">
        <p>这里显示调味料</p>
        <ul id="spices" class="dl_list">
          <li><img src="#"/></li>
          <li><div class="div_materials"><img src="/images/meat/5.gif"/></div></li>
        </ul>
      </div>
    </div>

  <div>提示：拖动食材到右边</div>
  </div> <!-- of <div id="left"> -->

  <div id="right">
    <div>
      菜名：<%=@choosed_dish.name%>
    </div>
    <div id="food_dropper">
    </div>
  </div>  <!-- of <div id="right"> -->

</div> <!-- of <div id="main"> -->
